<template>
  <div class="el_d">
    <div class="el_y">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content">
            订单编号:
            <span style="margin-left: 27px;">3102816260611546334</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content" style="margin-left: 20px;">
            运单编号:
            <span>SL1000766318317</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            下单时间:
            <span>2023-11-03 10:33:15</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            订单状态:
            <span>已签收</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            预计到达日期:
            <span> 2023-11-07 10:33:15</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 基本信息 -->
    <el-collapse v-model="activeName" style="margin-top: 20px;">
      <el-collapse-item name="1">
        <template slot="title">
          <h3 class="character">基本信息</h3>
        </template>
        <div class="el-n">
          <!-- 发货 -->
          <div>
            <div>
              <span class="el-icon-location" />
              <span class="el-bt">发货方</span>
            </div>
            <div class="el-fhf">
              <div style="margin-left: 30px;">
                <div>
                  <span>发货方姓名:</span>
                  <span class="el-xtm">詹姆斯</span>
                </div>
                <div>
                  <span>发货方地址:</span>
                  <span class="el-xtm"> 辽宁沈阳皇姑</span>
                </div>
              </div>
              <div style="margin-left: 200px;">
                <div>
                  <span>发货方电话:</span>
                  <span class="el-xtm">17710608230</span>
                </div>
                <div>
                  <span>详细地址:</span>
                  <span class="el-xtm">佳苑庄园</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 收获 -->
          <div>
            <div>
              <span class="el-icon-aim" />
              <span class="el-bt">收货方</span>
            </div>
            <div class="el-fhf">
              <div style="margin-left: 30px;">
                <div>
                  <span>收货方姓名:</span>
                  <span class="el-xtm">武昌收件人</span>
                </div>
                <div>
                  <span>收货方地址:</span>
                  <span class="el-xtm">湖北武汉武昌</span>
                </div>
              </div>
              <div style="margin-left: 200px;">
                <div>
                  <span>收货方电话:</span>
                  <span class="el-xtm">17710608230</span>
                </div>
                <div>
                  <span>详细地址:</span>
                  <span class="el-xtm"> 东亭小区</span>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div>
              <span class="el-icon-s-flag" />
              <span class="el-bt">距离:十万八千里</span>
            </div>
            <div class="el-fhf">
              <div style="margin-left: 30px;">
                <div>
                  <span>备注:</span>
                  <span class="el-xtm">暂无</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 订单跟踪 -->
    <el-collapse v-model="activeName" style="margin-top: 20px;">
      <el-collapse-item name="2">
        <template slot="title">
          <h3 class="character">订单跟踪</h3>
        </template>
      </el-collapse-item>
    </el-collapse>
    <!-- 订单轨迹 -->
    <el-collapse v-model="activeName" style="margin-top: 20px;">
      <el-collapse-item name="3">
        <template slot="title">
          <h3 class="character">订单轨迹</h3>
        </template>
        <div class="el-n">
          <el-card shadow="never">
            <div>
              <baidu-map
                ref="myMap"
                class="map"
                center="湖北"
              />
            </div>
          </el-card>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- 取件信息 -->
    <el-collapse v-model="activeName" style="margin-top: 20px;">
      <el-collapse-item name="4">
        <template slot="title">
          <h3 class="character">取件信息</h3>
        </template>
        <div>
          <div class="el-qj">
            <div style="margin-left: 35px;">
              <div>
                <span>所在网点:</span>
                <span class="el-qxx">皇姑区营业部</span>
              </div>
              <div>
                <span>快递员电话:</span>
                <span class="el-qxx">17766667777</span>
              </div>
            </div>
            <div style="margin-left: 80px;">
              <div>
                <span>取件类型:</span>
                <span class="el-qxx">上门取件</span>
              </div>
              <div>
                <span>预计取件时间:</span>
                <span class="el-qxx">2023-11-03 14:11:17</span>
              </div>
            </div>
            <div style="margin-left: 80px;">
              <div>
                <span>作业状态:</span>
                <span class="el-qxx">已完成</span>
              </div>
              <div>
                <span>取件完成时间:</span>
                <span class="el-qxx"> 2023-11-03 14:11:17</span>
              </div>
            </div>
            <div style="margin-left: 60px;">
              <div>
                <span>取件快递员:</span>
                <span class="el-qxx">李皇姑</span>
              </div>
            </div>
          </div>
        </div>

      </el-collapse-item>
    </el-collapse>
    <!-- 费用信息 -->
    <el-collapse v-model="activeName" style="margin-top: 20px;">
      <el-collapse-item name="5">
        <template slot="title">
          <h3 class="character">费用信息</h3>
        </template>
        <div>
          <div class="el-qj">
            <div style="margin-left: 38px;">
              <div>
                <span>运费:</span>
                <span class="el-qxx">
                  18元
                </span>
              </div>
            </div>
            <div style="margin-left: 300px;">
              <div>
                <span>支付方式:</span>
                <span class="el-qxx">预结</span>
              </div>
            </div>
            <div style="margin-left: 300px;">
              <div>
                <span>付款状态:</span>
                <span class="el-qxx">未付</span>
              </div>
            </div>
          </div>
        </div>

      </el-collapse-item>
    </el-collapse>
    <!-- 货物信息 -->
    <el-collapse v-model="activeName" style="margin-top: 20px;">
      <el-collapse-item name="6">
        <template slot="title">
          <h3 class="character">货物信息</h3>
        </template>
        <div class="el-n">
          <div style="border-style: solid;border-width: 1px;border-color: #ebeef5;">
            <template>
              <el-table
                :data="tableData"
                show-summary
                style="width: 100%"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column
                  prop="name"
                  label="货品名称"
                />
                <el-table-column
                  prop="amount1"
                  label="货品类型"
                />
                <el-table-column
                  prop="amount2"
                  label="重量(千克)"
                />
                <el-table-column
                  prop="amount3"
                  label="体积(立方)"
                />
                <el-table-column
                  label="操作"
                  width="120"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>

export default {
  name: 'EditOrder',
  components: {},
  props: [],
  data() {
    return {
      activeName: ['1', '2', '3', '4', '5', '6'],
      tableData: [{
        name: '单肩包',
        amount1: '皮具箱包',
        amount2: '1',
        amount3: 1
      }]
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  updated() {

  },
  destroyed() {

  },
  activated() {

  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    handleClick(row) {
      console.log(row)
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  }
}
</script>
<style lang='scss' scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  // 大框
  .el_d{
    margin-left: 20px;
    margin-right: 20px;
  }
  // 订单基本信息
  .el_y{
    margin-top: 30px;
    padding-left: 50px;
    padding-right: 30px;
    padding-top: 20px;
    font-size: 14px;
    background-color:#fff;
    .grid-content {
    min-height: 36px;
    margin-top: 15px;
    span{
      margin-left: 8px;
      color: #818693;
      font-weight: 400;
      font-family: PingFangSC-Regular,PingFang SC;
    }
  }
  }
  // icon图标
  .el-icon-location{
    font-size: 20px;
    margin-right: 5px;
    color: blue;
  }
  .el-icon-aim{
    font-size: 20px;
    margin-right: 5px;
    color: red;
  }
  .el-icon-s-flag{
      font-size: 20px;
    margin-right: 5px;
    color: rgb(255, 106, 0);
  }
  // 基本信息发货
  .el-fhf{
    display: flex;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    span{
    margin-top: 20px;
    font-weight: 400;
    line-height: 35px;
    font-family: PingFangSC-Regular,PingFang SC;
    }
    // 基本信息用户数据
    .el-xtm{
    margin-left: 10px;
    color: #818693;
    }
  }
  // 基本信息小标题
  .el-bt{
    margin-left: 5px;
    font-size: 16px;
    font-weight: 400;
  }
  // 订单轨迹
  .el-n{
    padding-top: 30px;
    padding-right: 40px;
    flex: 1;
    margin-left: 20px;
    .map {
      width: 100%;
      height: 668px;
      overflow: hidden;
      // 使上下居中
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  // 基本信息
  .character{
    padding-left: 40px;
    padding-right: 40px;
    color: #111;
  }
  // 取件信息
  .el-qj{
    display: flex;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 10px;
    span{
    margin-top: 20px;
    font-weight: 400;
    line-height: 35px;
    font-family: PingFangSC-Regular,PingFang SC;
    }
    .el-qxx{
      margin-left: 10px;
      color: #818693;
    }
  }
  // 地图
  .map {
    width: 100%;
    height: 400px;
  }
</style>
